<template>
  <div id="detail-nav-bar">
    <nav-bar navbarBack="#fff" navbarTextColor="#000">
      <div slot="nav-bar-left">
        <img class="nav-bar-left-img" src="~assets/img/common/back.svg" alt="" @click="detailBackClick">
      </div>
      <div class="nav-bar-center" slot="nav-bar-center">
        <div class="nav-center" v-for="(item,index) in titles" @click="centerClick(index)"
             :class="{active:index === activeTitleIndex}">
          {{item}}
        </div>
      </div>
    </nav-bar>
  </div>
</template>

<script>

  import NavBar from "components/common/navbar/NavBar";

  export default {
    name: "DetailNavBar",
    components: {NavBar},
    data() {
      return {
        titles: ["商品", "参数", "评价", "推荐"],
        activeTitleIndex: 0
      }
    },
    methods: {
      centerClick(index) {
        this.$emit("centerClick", index);
        this.activeTitleIndex = index;
      },
      detailBackClick() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>
  #detail-nav-bar {
    font-size: 15px;
  }

  .nav-bar-center {
    display: flex;
  }

  .nav-center {
    flex: 1;
  }

  .active {
    color: var(--color-high-text);
  }

  .nav-bar-left-img {
    vertical-align: middle;
  }
</style>
